<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>已分配客户</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-search">
       <div class="item">时间
           <el-date-picker
           v-model="valueTime"
           type="daterange"
           clearable
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期">
           </el-date-picker>
       </div>
      <el-row>
        <el-input
          style="width: 200px;margin-right: 10px"
          placeholder="请输入客户信息查询"
          v-model="keyword"
          clearable
          @clear="resetData"
        >
        </el-input>
        <el-button type="primary" @click="resetData" >搜索</el-button>
      </el-row>
    </div>
    <div class="table-content">
      <el-table
        border
        empty-text="当前数据空空如也"
        ref="multipleTable"
        :data="offerList"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selectedRow"
        @select-all="selectedAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="userid" label="序号" width="100"></el-table-column>
        <el-table-column prop="room_type" label="客户名" width="100"></el-table-column>
        <el-table-column prop="id" label="原添加人" width="auto"></el-table-column>
        <el-table-column prop="name" label="接替成员" width="auto"></el-table-column>
        <el-table-column prop="username" label="转接状态" width="auto"></el-table-column>
        <el-table-column prop="mobile" label="分配时间" width="auto" :formatter="changeTime"></el-table-column>
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 0,
        keyword: '',
        offerList: [],
        multipleSelection: [],

        dialogVisible:false,
        addStaffList:[],
        staffInput:'',
        staffRadio:'',
        searchStaffList:false,
        moreText:'点击加载更多',
        searchPage:1,
        searchPageSize:10,
        valueTime:[]
      }
    },
    mounted() {
      this.queryList();
    },
    methods: {
        changeTime(row, column, cellValue, index){
            if(cellValue){
                return this.$moment(cellValue*1000).format('yyyy-MM-DD HH:ss')
            }
        },


        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },


        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryList();
        },

        queryList() {
            this.$http.get('/api/admin/qywx/Index/getQyUserList', {
                // page: this.page,
                // pagesize: this.pageSize
            }).then(res => {
				console.log(res,'员工列表')
                if (res.code == 1) {
                    this.offerList = res.data.userlist?res.data.userlist:[];
                    this.total = res.data.total;
                }
            })
        },
        resetData(){
            this.page = 1;
            this.queryList();
        }
    }
  }
</script>
<style lang="less" scoped>
  @import 'index.less';
</style>
